let hnav=document.querySelector(".hnav");
let nav = document.querySelector(".nav");
let flag = 1;
hnav.addEventListener("click",function(){
    if (flag){
        nav.style.height = "300px";
        nav.style.display = "block";
        flag = 0;
    }else {
        nav.style.display="none";
        flag=1;
    }
})

let  all_li=document.querySelectorAll("#mycolor li");
var root = document.querySelector(':root');
for (let i=0;i<=all_li.length;i++){
    all_li[i].addEventListener("click",function(){
        if (i==0){
            root.style.setProperty("--bgwrap","linear-gradient(to top,salmon,pink 60%,aliceblue )");
            root.style.setProperty("--bgflex","#FF91B4");
            root.style.setProperty("--bgstudy","#FF719F");
        }
        if (i==1){
            root.style.setProperty("--bgwrap","linear-gradient(to top,aliceblue,#14edff 60%,aliceblue )");
            root.style.setProperty("--bgflex","#14edff");
            root.style.setProperty("--bgstudy","#09a3b6");
        }
        if (i==2){
            root.style.setProperty("--bgwrap","linear-gradient(to top,lightsteelblue,silver 60%,aliceblue )");
            root.style.setProperty("--bgflex","silver");
            root.style.setProperty("--bgstudy","silver");
        }
    })
}